<template>
	<view class="space-container">
		<!-- 用户信息头 -->
		<view class="profile-header">
			<image :src="getAvatarUrl(userInfo.avatar)" class="header-avatar" />
			<text class="header-name">{{ userInfo.name || '加载中...' }}</text>
			<view class="header-stats">
				<view class="stat-item">
					<text class="stat-value">{{ stats.posts }}</text>
					<text class="stat-label">动态</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ stats.following }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ stats.followers }}</text>
					<text class="stat-label">粉丝</text>
				</view>
			</view>
		</view>

		<!-- 功能标签页 -->
		<view class="tabs-container">
			<view 
				v-for="tab in tabs" 
				:key="tab.id" 
				class="tab-item"
				:class="{'active': currentTab === tab.id}"
				@click="switchTab(tab.id)"
			>
				{{ tab.name }}
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 根据 currentTab 显示不同内容 -->
			<view v-if="currentTab === 'posts'" class="tab-content">
				<text>这里是用户的动态列表，敬请期待！</text>
			</view>
			<view v-if="currentTab === 'likes'" class="tab-content">
				<text>这里是用户点赞过的内容，敬请期待！</text>
			</view>
			<view v-if="currentTab === 'achievements'" class="tab-content">
				<text>这里是用户的成就墙，敬请期待！</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/user';
import { generateAvatarSvg } from '@/utils/avatar';

const DEFAULT_AVATAR = '/static/default-avatar.png';

export default {
	data() {
		return {
			userInfo: {},
			currentTab: 'posts',
			tabs: [
				{ id: 'posts', name: '我的动态' },
				{ id: 'likes', name: '我的点赞' },
				{ id: 'achievements', name: '我的成就' },
			],
			stats: {
				posts: 0,
				following: 0,
				followers: 0
			}
		};
	},
	onLoad() {
		this.fetchCurrentUserInfo();
	},
	methods: {
		async fetchCurrentUserInfo() {
			try {
				const userId = uni.getStorageSync('userId');
				if (userId) {
					const res = await getUserInfo(userId);
					this.userInfo = res;
					this.stats.posts = res.posts_count || 0;
					this.stats.following = res.following_count || 0;
					this.stats.followers = res.followers_count || 0;
				}
			} catch (error) {
				console.error("获取用户信息失败:", error);
			}
		},
		getAvatarUrl(config) {
			if (!config) return DEFAULT_AVATAR; // 默认头像
			return generateAvatarSvg(config);
		},
		switchTab(tabId) {
			this.currentTab = tabId;
			// 后续可以在此加载不同标签页的数据
		}
	}
}
</script>

<style scoped lang="scss" src="./space.scss"></style> 